<template>
  <div style="min-height: 100%">
    <image class="bacImg" :src="relayData.settings.compo_bg_image!= ''?relayData.settings.compo_bg_image:relayData.settings.banner" alt=""></image>
    <div class="signArea">

      <!--    <div class="bacArea">
      &lt;!&ndash;      <img class="titleImg" src="../../static/relay/title.png" alt="">&ndash;&gt;
          </div>-->
      <div class="signInfo">
        <div class="signForm">
          <div class="signCommon signName" :style="{color:$store.state.mainColor}">
            姓名
            <input class="signInput" v-model="signName" type="text" :style="{border:'1px solid ' +$store.state.mainColor}">
          </div>
          <div class="signCommon signTip" :style="{color:$store.state.mainColor}">
            {{relayData.settings.compo_start_text}}
            <div class="signInner">
              <div class="left" :class="{'leftNo':currentIndex==0}" @click="changeWord('left')">
                <uni-icons type="back" size="35" :color="$store.state.mainColor"></uni-icons>
              </div>
              <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
                      :current="currentIndex" @change="changeIndex">
                <swiper-item v-for="(item,index) in relayData.settings.my_words">
                  <div class="swiper-item uni-bg-red" :style="{border:'1px solid ' +$store.state.mainColor}">
                  <span>
                    {{ item.text }}
                  </span>
                  </div>
                </swiper-item>
                <!--              <swiper-item>
                                <div class="swiper-item uni-bg-green">
                                  <span>
                                    真心的祝福我们的祖国繁荣倡盛，使我们伟大的祖国讫立于世界的东方
                                  </span>！</div>
                              </swiper-item>
                              <swiper-item>
                                <div class="swiper-item uni-bg-blue">
                                  <span>永远跟党走，唱响中国梦。</span>
                                </div>
                              </swiper-item>-->
              </swiper>
              <div class="right" :class="{'rightNo':currentIndex+1==relayData.settings.my_words.length}" @click="changeWord('right')">
                <uni-icons type="forward" size="35" :color="$store.state.mainColor"></uni-icons>
              </div>
            </div>

          </div>
          <div class="nextStep" @click="savePosterInfo('poster')">
            <image class="nextStepImg" :mode="'widthFix'" :src="relayData.settings.compo_enter_button" alt=""></image>
          </div>
        </div>
        <div class="signBottom">
          <img src="../../static/relay/signBottom.png" alt="">
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import {mapState,mapGetters} from "vuex";
import {timeStampToString} from '@/until/tool'
import {getQianFanImage} from '@/api/api'
export default {
  name: "relaySign",
  data(){
    return{
      indicatorDots: false,
      autoplay: false,
      disable:true,
      currentIndex:0,
      myWordsList:[],
      signName:'',
      singWord:'',
    }
  },
  computed:{
    ...mapState({
      basicData: state => state.basicData
    }),
    ...mapGetters(['siteinfo'])
  },
  props:{
    relayData:{
      type:Object,
      default: {}
    }
  },
  methods:{
    changeIndex(e){
      console.info(e)
      this.currentIndex = e.detail.current
    },
    changeWord(type){
      console.info(type)
      if('right' == type){
        console.info(this.currentIndex)
        if(this.currentIndex+1 == this.relayData.settings.my_words.length){
          return
        }else{
          let index = this.currentIndex
          this.currentIndex = index+1
        }

      }else{
        if(this.currentIndex == 0){
          return;
        }else{
          this.currentIndex = this.currentIndex-1
        }

      }
      console.info(this.currentIndex)
    },
    async savePosterInfo(type){
      if('' == this.signName){
        uni.showToast({ title:'请输入姓名', icon:'none' })
        return;
      }
      let timeNow = parseInt(new Date().getTime()/1000)
      let set = {
        showHour: false,
        showMin: false,
        showSec: false,
        showWeek: false
      }
      let timeStr = timeStampToString(timeNow, set)

      /* = timeStampToString(timeNow).split(' ')[0]*/
      //有微信头像 替换一下
      let wxIcon= uni.getStorageSync('iconWx'+uni.getStorageSync('actid'))
      let qianfanIcon = ''
      if(wxIcon != ''){
        let res = await getQianFanImage({url:wxIcon})
        qianfanIcon = this.siteinfo.qiniu_url+'/'+res.data.url
      }
      let data = {
        name:this.signName,
        icon:wxIcon != '' ? qianfanIcon:uni.getStorageSync('icon'+uni.getStorageSync('actid')),
        word:this.relayData.settings.my_words[this.currentIndex].text,
        timeNow:timeNow,
        timeStr:timeStr,
        wordTips:this.relayData.settings.compo_start_text,
      }
      this.$store.commit('SET_FORM_RELAY_DATA',data)
      this.$emit('stepChange',type)
    }
  },
  mounted() {
    /*this.myWordsList = this.relayData.settings.my_words*/
    console.info(this.$store.state.loginInfo)
    let data = {
      name:'',
      icon:uni.getStorageSync('iconWx'+uni.getStorageSync('actid')) != '' ?uni.getStorageSync('iconWx'+uni.getStorageSync('actid')): uni.getStorageSync('icon'+uni.getStorageSync('actid')),
      word:this.relayData.settings.my_words[this.currentIndex].text,
      timeNow:0,
      timeStr:0,
    }
    console.info(data)
    this.$store.commit('SET_FORM_RELAY_DATA',data)
  }
}
</script>

<style scoped lang="scss">
@import 'scss/relay.scss';
.signArea{
  height: 100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 100% 100% !important;
}
.bacArea {
  position: relative;
  width: 95%;
  height: 380rpx;
  margin: 0 auto;

  .titleImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 888;
    animation: fadenum 5s;
    left: 50%;
    transform: translate(-50%, 0%) scale(1.25);
  }

  @keyframes fadenum {
    0% {
      left: 50%;
      transform: translate(-50%, 0%) rotateX(0deg) scale(1.25);
    }
    100% {
      left: 50%;
      transform: translate(-50%, 0%) rotateX(360deg) scale(1.25);
    }
  }

}
.signInfo{
  width: 620rpx;
  height: 70%;
  margin: 40% 0 0 0;
  padding: 20rpx 0 0 0;
  background: #FCF8D2;
  box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1600);
  border-radius: 18px 18px 18px 18px;
  opacity: 1;
  position: relative;
  left: 50%;
  transform: translate(-50%,0%);
  .signForm{
    margin: 0;
    height: 1000rpx;
    .signCommon{
      width: 93%;
      margin: 40rpx auto 0 auto;
      font-size: 32rpx;
      font-weight: bold;
    }
    .signInput{
      margin: 16rpx 0 0 0;
      width: 100%;
      height: 80rpx;
      line-height: 40rpx;
      background: #FDEBAB;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 3rpx 10rpx;
      box-sizing: border-box;
    }
  }
  .signBottom{
    position: absolute;
    bottom: -1rpx;
    width: 688rpx;
    height: 480rpx;
    /*background: url("../../static/relay/signBottom.png");*/
    background-size: 100% 100%;
    left: 50%;
    transform: translate(-50%,0%);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nextStep{
    width: 268rpx;
    margin: 62rpx auto 0 auto;
    position: relative;
    z-index: 999;
    animation: jelly 1s infinite;
    .nextStepImg{
      width: 100%;
    }
  }
}
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.signInner{
  margin: 30rpx 0 0 0;
  display: flex;
  align-items: center;
  width: 100%;
  .left{
    /*width: 60rpx;
    height: 60rpx;*/
  }
  /*.left::after{
    content: '<';
    font-family: swiper-icons;
    font-size: 34rpx;
    text-transform: none!important;
    transform: scale(2.1, 4.5);
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;

  }*/
  /*border-color:green blue orange red;*/
    /*background: url("../../static/relay/before.png");
    background-size: 100% 100%;*/
  .leftNo{
    opacity: 0.5;
    /*background: url("../../static/relay/beforeNo.png");
    background-size: 100% 100%;*/
  }
  .right{
    /*width: 0rpx;
    height: 0rpx;*/
    /*border-color:green blue orange red;*/

    /*background: url("../../static/relay/after.png");
    background-size: 100% 100%;*/
  }
  .rightNo{
    opacity: 0.5;
    /*background: url("../../static/relay/afterNo.png");
    background-size: 100% 100%;*/
  }
  .swiper {
    width: 100%;
    height: 206rpx;
  }
  .swiper-item {
    width: 400rpx;
    height: 200rpx;
    margin: 0 auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    white-space:normal;
    text-align: center;
    background: #FDEBAB;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    color: #222222;
    /*border: 1px solid #BF0612;*/
    text-align: center;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    span{
      font-weight: normal;
    }
  }
  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }
  .uni-common-mt {
    margin-top: 60rpx;
    position: relative;
  }
  .info {
    position: absolute;
    right: 20rpx;
  }
  .uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
  }
}

</style>